<script setup lang="ts">
import { onMounted, ref } from "vue";
import { Namespace } from "@/views/domain/kubeHud/api/k8s/types";
import { useK8SApi } from "@/views/domain/kubeHud/api/k8s/k8s";
import { useVerifyRouter } from "@/router/use";
import { useBaseCRUDRoute } from "@/views/domain/kubeHud/api/provider/baseListProvider";
import { KRouteNamespace } from "@/views/domain/kubeHud/router";

import ConfirmButton from "@/views/domain/kubeHud/views/components/ConfirmButton/index.vue";

type Prop = {
  editable?: boolean;
};
const props = defineProps<Prop>();

const model = defineModel();
const emits = defineEmits(["change"]);

const router = useVerifyRouter();
const { pushTo } = useBaseCRUDRoute({ router });

const { namespaceRepo } = useK8SApi();
const nsList = ref<Namespace[]>();
const loading = ref(false);
const reloadNsList = async () => {
  loading.value = true;
  const { items } = await namespaceRepo.getNamespaceList({});
  if (items) {
    nsList.value = items;
  }

  loading.value = false;
};

const addNamespace = () => {
  pushTo(KRouteNamespace.Create);
};

onMounted(() => {
  reloadNsList();
});
</script>

<template>
  <div class="w-full flex gap-2">
    <el-select
      v-model="model"
      v-loading="loading"
      placeholder="全部命名空间"
      class="min-w-24"
      @change="emits('change')"
    >
      <el-option
        v-for="ns in nsList"
        :key="ns.metadata.name"
        :label="ns.metadata.name"
        :value="ns.metadata.name"
      />
    </el-select>
    <ConfirmButton
      v-if="editable"
      icon="Plus"
      type="primary"
      title="跳转到新建命名空间"
      @confirm="addNamespace"
    />
  </div>
</template>
<style lang="scss" scoped></style>
